import React, { useState, useEffect } from "react";
import { View, Image } from "@tarojs/components";
import classNames from "classnames";
import placeholderImg from "@/images/placeholder.png";

import "./index.scss";

interface Iprops {
  total: number | null;
  dataLength: number;
  loading: boolean;
  className?: string;
  hideNone?: boolean; // 是否展示暂无数据
  hideAll?: boolean;
}

const Index: React.FC<Iprops> = (props: Iprops) => {
  return (
    <View
      className={classNames(
        "list-status-info-component",
        props.className && props.className
      )}
    >
      {!props.hideNone && (
        <View>
          {props.total === 0 && (
            <View>
              <Image src={placeholderImg} className="placeholder-img" />
              <View className="no-data">暂无数据</View>
            </View>
          )}
        </View>
      )}

      {typeof props.total === "number" &&
        props.total > 0 &&
        props.total < props.dataLength &&
        props.loading && <View className="loading">加载中</View>}
      {!props.hideAll && (
        <View>
          {typeof props.total === "number" &&
            props.total > 0 &&
            props.total === props.dataLength &&
            !props.loading && <View className="load-all">已全部加载完毕</View>}
        </View>
      )}
    </View>
  );
};

export default Index;
